<template>
  <div style="height: 600px">
    <p style="color: red">
      {{ tips }}
    </p>
    <div id="jexcelTable" />
  </div>
</template>

<script>
import jexcel from 'jexcel'
import 'jexcel/dist/jexcel.css'
export default {
  props: {
    tips: {
      type: String,
      default: ''
    },
    columns: {
      type: Array,
      default: () => {
        return []
      }
    },
    dateRange: {
      type: Array,
      default: () => {
        return []
      }
    },
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      myTable: null
    }
  },
  mounted() {
    this.renderTable()
  },
  methods: {
    renderTable() {
      const dom = document.getElementById('jexcelTable')
      this.myTable = jexcel(dom, {
        data: this.tableData,
        columns: this.columns,
        onchange: this.excelChange
      })
    },
    excelChange(instance, cell, x, y, value) {
      this.$emit('change', {
        instance,
        cell,
        x,
        y,
        value
      })
    }
  }
}
</script>

<style>
.jexcel > tbody > tr > td.readonly {
  color: rgba(0, 0, 0, 0.45);
}
</style>
